<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件嵌套</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="demo">

</div>
<hr>
</body>
<!--
    组件嵌套：组件可以嵌套使用，组件的嵌套使用，组件的标签必须大写。
        注意点:注册组件的应该按照从子到父的顺序去进行。



-->

<script>
    const Car = {
        template: `<div><h1>{{name}}</h1></div>`,
        data() {
            return {
                name: "兰博基尼",
            }
        }
    }
    <!-- 自定义car组件   -->
    const app = {
        template: `<div><h1>{{appName}}</h1><hr><Car></Car></div>`,
        data() {
            return {
                appName: "Vue",
            }
        },components: {
            Car
        }
    };

    new Vue({
        el: '#demo',
        template: `<app></app>`,
        components: {
            app
        }
    });


</script>
</html>